<template>
  <div>
    <Row class="search-info-style">
      <Col span="6">
      <span style="text-al">申&nbsp;&nbsp;请&nbsp;&nbsp;人：</span>
      <Input style="width: 70%;" v-model="searchInfo.applyname"/>
      </Col>
      <Col span="6">
      <span>身份证号：</span>
      <Input style="width: 70%;" v-model="searchInfo.cardno"/>
      </Col>
      <Col span="6">
      <span>业务编号：</span>
      <Input style="width: 70%;" v-model="searchInfo.order_code"/>
      </Col>
      <Button class="new-btn-sty" @click="refresh()" style="float:right">
        <Icon type="ios-clock-outline"/>
        刷新
      </Button>
      <Button class="new-btn-sty" @click="search()" style="float:right">
        <Icon type="ios-search"/>
        搜索
      </Button>
    </Row>
    <Table border :columns="columns" :data="datalist" :loading="loadData">
      <template slot-scope="{ row, index}" slot="action">
        <Button type="success" size="small" style="margin-right: 5px" @click="callBack(row)">评价</Button>
      </template>
    </Table>
    <Page class="page_style" :total="searchInfo.totalnum" :current="searchInfo.currentPageNo"
          :page-size="searchInfo.currentPageSize" @on-change="changePageNo" show-total show-sizer
          @on-page-size-change="size"/>
  </div>
</template>
<script>

import axios from '@/libs/api.request'

export function postAction (url, parameter) {
  return axios.request({
    url: url,
    method: 'post',
    data: parameter
  })
}

export default {
  name: 'index',
  components: {},
  data () {
    return {
      searchInfo: {
        applyname: '',
        order_code: '',
        applytime: [],
        totalnum: 0,
        currentPageNo: 1,
        currentPageSize: 10,
        department_name: ''
      },
      datalist: [],
      treelist: [],
      eventListSQ: [],
      eventListSC: [],
      columns: [
        {
          title: '事项名称',
          minWidth: 125,
          key: 'title'
        },
        { title: '业务编号', key: 'code', width: 150 },
        { title: '申请人', key: 'name', width: 150 },
        {
          title: '手机号',
          key: 'mobile',
          width: 150,
          render: (h, params) => {
            var mobile = params.row.mobile
            if (mobile) {
              if (mobile.length === 8 || mobile.length === 7) {
                mobile = mobile.substring(0, 3) + '****' + mobile.substring(6)
              } else if (mobile.length === 11) {
                mobile = mobile.substring(0, 3) + '****' + mobile.substring(7)
              }
            }
            return h('div', mobile)
          }
        },
        {
          title: '身份证',
          key: 'cardno',
          align: 'center',
          width: 150,
          render: (h, params) => {
            var cardno = params.row.cardno
            if (cardno) {
              cardno = cardno.substring(0, 6) + '********' + cardno.substring(14)
            }
            return h('div', cardno)
          }
        },
        {
          title: '评分',
          key: 'score',
          align: 'center',
          width: 200,
          render: (h, params) => {
            let html = ''
            for (var i = 0; i < params.row.score; i++) {
              html += "<div class='ivu-rate-star ivu-rate-star-full'><span type='half' class='ivu-rate-star-content'></span></div>"
            }
            return h('div', {
              domProps: {
                innerHTML: html
              }
            })
          }
        },
        {
          title: '评价',
          key: 'evaluation',
          align: 'center',
          width: 150,
          render: (h, params) => {
            var evaluation = params.row.evaluation
            if (evaluation === '0') {
              return h('div', '未评价')
            } else if (evaluation === '1') {
              return h('div', '现场评价')
            } else if (evaluation === '2') {
              return h('div', '电话回访评价')
            }
            return h('div', '')
          }
        }

      ],
      loadData: true
    }
  },
  methods: {
    callBack (row) {
      this.$refs.modal.edit(row)
    },
    times (date) {
      if (date === undefined || date === null || date === '') {
        return '0时0分0秒'
      }
      let staytimeGap = date
      if (staytimeGap < 0) {
        return '0时0分0秒'
      }
      let stayHour = Math.floor(staytimeGap / (3600 * 1))
      let leave1 = staytimeGap % (3600 * 1)
      let stayMin = Math.floor(leave1 / (60 * 1))
      let leave2 = leave1 % (60 * 1)
      let staySec = Math.floor(leave2 / 1)
      return stayHour + '时' + stayMin + '分' + staySec + '秒'
    },

    search () {
      this.searchInfo.currentPageNo = 1
      this.searchData()
    },

    refresh () {
      this.searchInfo.applyname = ''
      this.searchInfo.cardno = ''
      this.searchInfo.order_code = ''
      this.searchInfo.currentPageNo = 1
      this.searchInfo.currentPageSize = 10
      this.searchData()
    },

    searchData () {
      let params = {
        name: this.searchInfo.applyname,
        cardno: this.searchInfo.cardno,
        code: this.searchInfo.order_code
      }
      this.init(params)
    },
    // 查询订单列表接口
    init (param) {
      this.loadData = true
      param.pageNo = this.searchInfo.currentPageNo
      param.pageSize = this.searchInfo.currentPageSize
      postAction('/api/as/cscforxq/auditorder/orderScorelist', param).then((res) => {
        if (res.data.errcode !== 0) {
          this.$Notice.error(res.data.errmsg)
        } else {
          this.datalist = res.data.data.results
          this.searchInfo.totalnum = res.data.data.totalRecord
        }
      }).finally(() => {
        this.loadData = false
      })
    },
    // 切换页码
    changePageNo (pageNo) {
      this.searchInfo.currentPageNo = pageNo
      this.searchData()
    },
    size (pageSize) {
      this.searchInfo.currentPageSize = pageSize
      this.changePageNo()
    }
  },
  created () {
    this.searchData()
  }
}
</script>
<style scoped lang="less">
  .card_style {
    height: 100%;
    width: 100%;
    overflow: hidden;

    .ivu-card-body {
      padding: 0px;
    }

  }

  .page_style {
    margin-top: 10px;
    text-align: right;
  }

  .search-info-style {
    margin: 10px;
  }

  /deep/ .nopadding .ivu-table-cell {
    padding: 0px 0px;
  }

  .title {
    text-align: center;
    font-size: 1.5rem;
    padding: 20px;
  }

  .notice-name {
    line-height: 2.5;
    margin-top: 6%;
  }

  .notice-context {
    text-indent: 2em;
    line-height: 2.5;
  }

  .notice-content1 {
    padding: 0 4% 0 12%;
    position: relative;
  }

  .notice-address {
    text-align: right;
    margin-top: 10%;
  }

  .notice-date {
    text-align: right;
  }

  .text-line {
    border-color: #878787;
    border-style: solid;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    text-align: center;
  }

  .text-line-date {
    border-color: #878787;
    border-style: solid;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    width: 10%;
    text-align: center;
  }

  .text-line-address {
    border-color: #878787;
    border-style: solid;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    width: 15%;
    text-align: center;
  }

  .print-btn {
    padding: 15px;
    float: right;
  }

  .code-img2 {
    height: 120px;
    width: 120px;
    top: 70%;
    left: 4%;
    position: absolute;
  }

  .code-img1 {
    height: 60%;
    width: 90%;
    margin-left: 5%;
  }

  .centerimg {
    text-align: center;
  }

  .pre_img_style {
    height: 500px;
    width: auto;
    max-width: 500px;
  }

  .new-btn-sty {
    margin-right: 5px;
    color: #fff;
    background-color: #235CA7;
    border-color: #235CA7;
    font-weight: 500;
  }
</style>
